<template>
    <input type="text" v-model="name">
    {{name}}
    {{person}}
    <button @click="updateCarName">改车名</button>
</template>

<script>
    import {reactive,toRef,toRefs,toRaw,markRaw} from 'vue'
    export default {
        name : "Demo",
        setup(){
            // 用浅层次的响应式，意思是只绑定第一层。
            const person = reactive({
                name:'zhangsan',
                age:18,
                job:{
                    name:"engineer",
                    skill:"vue",
                }
            })
            console.log(person)
            // 还原成最原始的对象
            // toRaw只能处理reactive
            const person2 = toRaw(person)
            console.log(person2)
            // 用MarkRaw标记的对象，不再有响应式反应
            // 使用markRaw可以跳过响应式渲染，加快速度。
            person.car = markRaw({
                name:"BYD F3",
                price:0.5,
            })
            function updateCarName(){
                person.car.name="BMW"
                console.log(person)
            }
            return {
                ...toRefs(person),
                person,
                updateCarName,
            }
        },
    }
</script>

<style scoped>

</style>